<template>
  <div class="login-container">
    <div class="login-wrapper">
      <!-- 左侧装饰区域 -->
      <div class="login-decoration">
        <div class="decoration-content">
          <img src="https://via.placeholder.com/200" alt="零食商城" class="logo">
          <h1>欢迎来到零食天地</h1>
          <p>美味零食，快乐分享</p>
          <div class="decoration-images">
            <img src="https://via.placeholder.com/100" alt="零食1" class="snack-image">
            <img src="https://via.placeholder.com/100" alt="零食2" class="snack-image">
            <img src="https://via.placeholder.com/100" alt="零食3" class="snack-image">
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <el-card class="login-card">
        <template #header>
          <div class="card-header">
            <img src="https://via.placeholder.com/40" alt="logo" class="header-logo">
            <span>{{ isLogin ? '欢迎回来' : '新用户注册' }}</span>
          </div>
        </template>
        
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="formRef" 
          label-width="80px"
          class="login-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input 
              v-model="form.username" 
              placeholder="请输入用户名"
              :prefix-icon="User"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="密码" prop="password">
            <el-input 
              v-model="form.password" 
              type="password" 
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
            ></el-input>
          </el-form-item>
          
          <el-form-item v-if="!isLogin" label="确认密码" prop="confirmPassword">
            <el-input 
              v-model="form.confirmPassword" 
              type="password" 
              placeholder="请确认密码"
              :prefix-icon="Lock"
              show-password
            ></el-input>
          </el-form-item>
          
          <el-form-item class="form-buttons">
            <el-button 
              type="primary" 
              @click="submitForm"
              class="submit-btn"
            >
              {{ isLogin ? '登录' : '注册' }}
            </el-button>
            <el-button 
              type="text" 
              @click="switchMode"
              class="switch-btn"
            >
              {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
            </el-button>
          </el-form-item>

          <!-- 第三方登录 -->
          <div class="third-party-login" v-if="isLogin">
            <div class="divider">
              <span>其他登录方式</span>
            </div>
            <div class="third-party-icons">
              <el-button circle class="icon-btn">
                <el-icon><WechatFilled /></el-icon>
              </el-button>
              <el-button circle class="icon-btn">
                <el-icon><AlipayCircleFilled /></el-icon>
              </el-button>
            </div>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { User, Lock, WechatFilled, AlipayCircleFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'LoginPage',
  setup() {
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    
    return {
      User,
      Lock,
      WechatFilled,
      AlipayCircleFilled
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ffd3a5 0%, #fd6585 100%);
  padding: 20px;
}

.login-wrapper {
  display: flex;
  width: 900px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.login-decoration {
  flex: 1;
  background: linear-gradient(135deg, #fd6585 0%, #ffd3a5 100%);
  padding: 40px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.decoration-content {
  text-align: center;
}

.decoration-content h1 {
  font-size: 28px;
  margin: 20px 0;
}

.decoration-content p {
  font-size: 16px;
  opacity: 0.9;
}

.decoration-images {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.snack-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  transition: transform 0.3s;
}

.snack-image:hover {
  transform: scale(1.1);
}

.login-card {
  flex: 1;
  border: none;
  background: transparent;
}

.card-header {
  text-align: center;
  font-size: 24px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.header-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.login-form {
  padding: 20px 40px;
}

.form-buttons {
  margin-top: 30px;
}

.submit-btn {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
}

.switch-btn {
  width: 100%;
  margin-top: 10px;
}

.third-party-login {
  margin-top: 30px;
  text-align: center;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dcdfe6;
}

.divider span {
  padding: 0 20px;
  color: #909399;
  font-size: 14px;
}

.third-party-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.icon-btn {
  font-size: 24px;
  color: #606266;
}

.icon-btn:hover {
  color: #409eff;
}

@media (max-width: 768px) {
  .login-wrapper {
    width: 100%;
    flex-direction: column;
  }

  .login-decoration {
    padding: 20px;
  }

  .login-form {
    padding: 20px;
  }
}
</style> 